<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>CSS Sprite 图标导航</title>
        <style>
            ul li{
                list-style:none;
                width:64px;
                height:64px;
                float:left;
                margin-right:10px;
                background:url(x.png) no-repeat;
                opacity:1;
            }
            #home{
                background-position:0 -192px;
            }
            #left{
                background-position:0 -128px;
            }
            #right{
                background-position:0 -64px;
            }
            #favorite{
                background-position:-64px 0;
            }
            #close{
                background-position:-64px -128px;
            }
            ul li:hover{
                opacity:0.5;
            }
        </style>
    </head>
    <body>
        <ul>
            <li id="home"><a href="#" title="主页"></a></li>
            <li id="left"><a href="#" title="前进"></a></li>
            <li id="right"><a href="#" title="后退"></a></li>
            <li id="favorite"><a href="#" title="收藏"></a></li>
            <li id="close"><a href="#" title="关闭"></a></li>
        </ul>
    </body>
</html>